<template>
  <div class="chart-card">
    <div class="chart-header">
      <span class="title">全国体校教练员数量-分布情况</span>
    </div>
    <div class="radio-group-wrapper">
      <el-radio-group v-model="activeTab" size="small">
        <el-radio-button label="在编">在编</el-radio-button>
        <el-radio-button label="外聘">外聘</el-radio-button>
      </el-radio-group>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart1" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div class="data-item" v-for="(item, index) in chartData" :key="index">
            <div class="item-name">
              <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart2" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div class="data-item" v-for="(item, index) in chartData" :key="index">
            <div class="item-name">
              <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart3" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div class="data-item" v-for="(item, index) in chartData" :key="index">
            <div class="item-name">
              <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: 'SchoolPieChart',
    data() {
      return {
        chart: null,
        activeTab: '在编',
        chartData: [
          { value: 34201, name: '30岁', itemStyle: { color: '#409EFF' } },
          { value: 12803, name: '30岁', itemStyle: { color: '#E6A23C' } },
          { value: 6803, name: '30岁', itemStyle: { color: '#F56C6C' } },
          { value: 6201, name: '30岁', itemStyle: { color: '#67C23A' } },
          { value: 6201, name: '30岁', itemStyle: { color: '#909399' } }
        ]
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      formatNumber(num) {
        return num.toLocaleString()
      },
      initChart() {
        this.chart1 = echarts.init(this.$refs.chart1);
        this.chart2 = echarts.init(this.$refs.chart2);
        this.chart3 = echarts.init(this.$refs.chart3);
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          series: [{
            type: 'pie',
            radius: ['65%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }]
        }
        this.chart1.setOption(option)
        this.chart2.setOption(option)
        this.chart3.setOption(option)
        // 监听父元素大小变化
        var ro = new ResizeObserver(entries => {
          for (let entry of entries) {
            const cr = entry.contentRect;
            this.chart1.resize();
            this.chart2.resize();
            this.chart3.resize();
            // console.log("Element:", entry.target);
            // console.log(`Element size: ${cr.width}px x ${cr.height}px`);
            // console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
          }
        });

        ro.observe(cc);
      }
    }
  }
</script>

<style scoped>
  .chart-card {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }

  .chart-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
  }

  .chart-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .radio-group-wrapper {
    background-color: #F5F7FA;
    margin: 10px 0;
  }

  .total-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 150%;
    font-weight: bold;
    color: #303133;
  }

  .chart-container {
    width: 100%;
    height: 300px;
  }

  .data-list {
    width: 220px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .data-item {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }


  .item-name {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    min-width: 120px;
  }

  .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .item-value {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
  }
</style>
